<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门管理</title>
		<link rel="stylesheet" href="/component/pear/css/pear.css" />
		<link rel="stylesheet" href="/admin/css/other/department.css"/>
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="organizationTreeContent" style="overflow: auto">
							<ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md9">
				<div class="layui-card">
					<div class="layui-card-body">
						<table id="organization-table" lay-filter="organization-table"></table>
					</div>
				</div>
			</div>
		</div>

		<script type="text/html" id="organization-toolbar">
				<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
					<i class="layui-icon layui-icon-add-1"></i>
					新增
				</button>
				<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
					<i class="layui-icon layui-icon-delete"></i>
					删除
				</button>
	    </script>
		<script src="/component/layui/layui.js"></script>
		<script src="/component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery', 'dtree'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let dtree = layui.dtree;
				let deptId = null;

				let MODULE_PATH = "operate/";

				let cols = [
					[
						{
							type: 'checkbox'
						},
						{
							title: '账号',
							field: 'username',
							align: 'center',
							width: 100
						},
						{
							title: '姓名',
							field: 'realName',
							align: 'center'
						},
						{
							title: '性别',
							field: 'sex',
							align: 'center',
							width: 80,
							templet: '#user-sex'
						},
						{
							title: '电话',
							field: 'phone',
							align: 'center'
						},
						{
							title: '员工部门',
							field: 'dept',
							align: 'center'
						}
					]
				]

				var DTree = dtree.render({
					elem: "#organizationTree",
					dataStyle: "layuiStyle",
					response: {message: "msg", statusCode: 0},
					initLevel: "2", //默认展开层级为1
					line: true, // 有线树
					ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
					icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
					method: 'get',
					url: "/deptment/tree"
				});

				table.render({
					elem: '#organization-table',
					url: '/user/list',
					height: 'full-150',
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#organization-toolbar',
					defaultToolbar: []
				});

				// 绑定节点点击事件
				dtree.on("node(organizationTree)", function(obj) {
					if (!obj.param.leaf) {
						var $div = obj.dom;
						DTree.clickSpread($div); //调用内置函数展开节点
					} else {
						deptId = obj.param.nodeId
						window.refresh()
					}
				});

				table.on('toolbar(organization-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					}
					if (obj.event === 'batchRemove') {
						window.batchRemove(obj)
					}
				});

				window.add = function() {
					if (!deptId) {
						layer.msg("未选中部门", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					layer.open({
						type: 2,
						title: '请选择用户数据分配至该部门',
						shade: 0.1,
						area: ['550px', '600px'],
						content: '/deptment-add-view',
						success:function (layero,index) {
							var iframe = window['layui-layer-iframe' + index];
							//将表格列内容传递给弹框，用户数据回显
							iframe.init(deptId)
						}
					});
				}

				window.batchRemove = function(obj) {
					if (!deptId) {
						layer.msg("未选中部门", {
							icon: 3,
							time: 1000
						});
						return false;
					}

					let data = table.checkStatus(obj.config.id).data;
					if (data.length === 0) {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					let ids = "";
					for (let i = 0; i < data.length; i++) {
						ids += data[i].userId + ",";
					}
					ids = ids.substr(0, ids.length - 1);
					layer.confirm('确定要从该部门下移除这些用户？', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: "/deptment/batch-remove/" + ids,
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.success) {
									layer.msg("操作成功", {
										icon: 1,
										time: 1000
									}, function() {
										table.reload('organization-table');
									});
								}
							},
							error: function (data) {
								layer.close(loading);
								layer.msg(data.responseJSON.detail,{icon:2,time:1000});
							}
						})
					});
				}

				window.refresh = function(param) {
					table.reload('organization-table', {
						where: {'deptId':deptId}
					})
				}
			})
		</script>
	</body>
</html>
